<template>
    <div>
        <div  v-for="item in menuTree" :index="item.path" :key="item.path">
        <sub-menu v-if="item.children && item.children.length > 0"  :index="item.path" :key="item.path">
             <template #title>
                <component v-if="item.icon" :is="`mo-icon-${item.icon}`" />
                <span>{{ item.name }}</span>
            </template>           
            <mo-menu-tree :menuTree="item.children"> 
            </mo-menu-tree>
        </sub-menu>
        <menu-item v-else :index="item.path">
                <component v-if="item.icon" :is="`mo-icon-${item.icon}`" />
                <template #title>{{ item.name }}</template>
        </menu-item>
        </div>

    </div>

</template>

<script lang="ts">

import { defineComponent,PropType } from 'vue'
import { ElMenu } from 'element-plus'
import {mtMenuUtil} from '@/moType'

const {MenuItem,SubMenu} = ElMenu;

export default defineComponent({
    name:'moMenuTree',
    components:{
        SubMenu,
        MenuItem
    },
    props: {
        index: {
          type: String,
          required: false
        },
         icon: {
          type: String,
          required: false
        },name: {
          type: String,
          required: false
        },menuTree:{
           type: Array as PropType<mtMenuUtil[]>,
           required: true,
           default: () => [
                {name : '' ,  //节点的名称
                 path : '',  //节点的路径
                 icon  : '',
                 url : '',  //节点的连接
                 children : []  //子节点     
                }      
           ]
        }       
    },
    setup () {

        return {
            
        }
    }
})
</script>

<style scoped>

</style>